<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" size="mini" @click="deleteAll"
          >批量删除</el-button
        >
        &nbsp;
        <el-input
          v-model="select_word"
          size="mini"
          placeholder="请输入用户名"
          class="handle-input"
        ></el-input>
        &nbsp;
        <el-input
          v-model="select_word1"
          size="mini"
          placeholder="请输入博客标题"
          class="handle-input"
        ></el-input>
        &nbsp;
        <el-button type="primary" size="mini" @click="getData"
          >查询收藏</el-button
        >
      </div>
    </div>
    <el-table
      size="mini"
      ref="multipleTable"
      border
      style="width: 100%"
      height="680px"
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="45"></el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="500"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="title"
        label="博客标题"
        width="950"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteRow(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total,prev,pager,next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tempData: [],
      select_word: "",
      select_word1: "",
      pageSize: 5, //分页每页大小
      currentPage: 1, //当前页
      total: 0,
      ids: -1, //当前选择项
      multipleSelection: [], //哪些项已经打勾
    };
  },
  created() {
    this.getData();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //获取当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    getData() {
      this.tempData = [];
      this.tableData = [];
      let param =
        "collect/" +
        this.$route.query.id +
        "/" +
        (this.currentPage - 1) +
        "/" +
        this.pageSize +
        "?username=" +
        this.select_word +
        "&title=" +
        this.select_word1;
      this.$get(param).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.blog;
          this.tempData = res.data.blog;
          this.total = res.data.total;
        }
      });
    },
    deleteRow(val) {
      this.$confirm("您确定要删除吗？", "提示", {
        type: "warning",
      }).then(() => {
        this.$delete("collect/" + val).then((res) => {
          if (res.code == 200) {
            this.getData();
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },
    deleteAll() {
      this.$confirm("您确定要删除吗？", "提示", {
        type: "warning",
      }).then(() => {
        for (var i = 0; i < this.multipleSelection.length; i++) {
          this.$delete("collect/" + this.multipleSelection[i].id).then(
            (res) => {
              if (res.code == 200) {
                this.getData();
              } else {
                this.$message.error(res.message);
              }
            }
          );
        }
      });
    },
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
  float: left;
}
.handle-input {
  width: 250px;
  display: inline-block;
}
.pagination {
  display: flex;
  justify-content: center;
}
</style>